import React,{useState} from 'react'
import "./index.css"
import { useNavigate } from 'react-router-dom';
function index() {
    const [isHovered, setIsHovered] = useState(false);
    const navigate=useNavigate()
    const btn =()=>{
      navigate('/hand')
    }
  return (
    <div>
       <div
          // 鼠标进入时设置状态为 true
          onMouseEnter={() => setIsHovered(true)}
          // 鼠标离开时设置状态为 false
          onMouseLeave={() => setIsHovered(false)}
          style={{
            border: '1px solid #ccc',
            display: 'inline-block',
            position: 'relative',
          }} className='aa'
          onClick={btn}
        >
          <p></p>
          {/* 当 isHovered 为 true 时显示内容 */}
          {isHovered && (
            <div style={{
              marginTop: '10px',
              position: 'absolute',
              top: '40px', // 控制显示位置
              right: '20px'
            }} className='a1'>
              <p className='ac'>123</p>
              <div className='ax'>
                <h4 className='az'>
                  免费版
                </h4>
                <h5 className='az'>开通会员</h5>
                <p className='az'>
                  50万
                </p>
              </div>
              <h5 className='tc'>退出登录</h5>
            </div>
          )}
        </div>
    </div>
  )
}

export default index
